<template>
  <div class="toreftorefs">
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <h2>性别：{{ person.gender }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeGender">修改性别</button>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, toRef, toRefs } from "vue";

// 数据
let person = reactive({ name: "张三", age: 18, gender: "男" });
// 通过toRefs将person对象中的n个属性批量取出，且依然保持响应能力
let { name, gender } = toRefs(person);
// 通过toRef将person对象中的gender属性取出，且依然保持响应能力
let age = toRef(person, "age");

// 方法
function changeName() {
//   name.value += "~"; //用.value是因为使用toref把reactive中的属性提取出来了
  person.name += '!' //正常不适用toref，可以直接点出属性来修改
}
function changeAge() {
  age.value += 1;
}
function changeGender() {
  gender.value = "女";
}
</script>
